<template>
	<view class="minProductCardPage">
		<view v-for="(item, index) in products" :key="index">
			<view class="minProductCard" @click="goToProductDetail(item)">
				<image src="https://img.js.design/assets/img/66eeb8420c8862f00f3d6524.png#e2a2622660be9d80b873d9307951f057" mode="aspectFill"></image>
				<view class="describe">
					<text class="title">知旅定制|黑白手作奶蛊手作瓷器函数的集合框架和深刻觉得户口和贷款还款好看的话</text>
					<view class="footer">
						<view class="rateBox">
							<text>￥1742</text>
						</view>
						<text>查看详情</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { defineProps, watchEffect } from 'vue';
	
	const props = defineProps({
		  products: {
				type: Array,
				default: () => [1,1,1,1,1,1,1,1,1,1]
		  }
	});

	// 监听 products 的变化
	watchEffect(() => {
	  console.log('父组件传递的 products:', props.products);
	});

</script>


<style lang="scss" scoped>
	.minProductCardPage{
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		width: 100%;
		.minProductCard{
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 25rpx;
			height: 200rpx;
			background-color: #fff;
			display: flex;
			gap: 25rpx;
			image{
				min-width: 170rpx;
				max-width: 170rpx;
				height: 100%;
				border-radius: 20rpx;
			}
			.describe{
				width: calc(100% - 170rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.title{
					font-size: 30rpx;
					font-weight: 400rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.footer{
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					justify-content: space-between;
					text{
						font-size: 24rpx;
						color: #7c7c7c;
					}
					.rateBox{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						gap: 10rpx;
					}
					.rateBox text{
						color: #6E6E6E;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>